<template>
    <div class="adress">
        <van-field 
            v-model="fieldValue" 
            is-link 
            label="地区" 
            placeholder="请选择所在地区" 
            @click="show = true" />
        <van-popup 
            v-model:show="show" 
            round 
            :inert="!show" 
            position="bottom">
            <van-cascader 
            v-model="cascaderValue" 
            title="请选择所在地区" 
            :options="options" 
            @close="show = false"
            @finish="onFinish" />
        </van-popup>
    </div>
</template>

<script>

export default {
    data() {
        return {
            fieldValue: "",
            show: false,
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{ text: '杭州市', value: '330100' }],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{ text: '南京市', value: '320100' }],
                },
            ],
            cascaderValue: ""
        }
    },
    methods: {
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
        }
    }
}
</script>

<style scoped></style>